<template>
	<view class="template-course tn-safe-area-inset-bottom">
		<view v-if="tabberPageLoadFlag[0]" :style="{display: currentIndex === 0 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <homePage ref="homePage"></homePage>
		  </scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[1]" :style="{display: currentIndex === 1 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <workbench ref="work"></workbench>
		  </scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[2]" :style="{display: currentIndex === 2 ? '' : 'none'}">
		  <scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
		    <myoperator ref="myop"></myoperator>
		  </scroll-view>
		</view>
		
		<tn-tabbar
		  v-model="currentIndex"
		  :list="tabbarList"
		  activeColor="#838383"
		  inactiveColor="#AAAAAA"
		  activeIconColor="tn-cool-bg-color-7"
		  :animation="true"
		  :safeAreaInsetBottom="true"
		  @change="switchTabbar"
		></tn-tabbar>
	</view>
</template>

<script>
	import homePage from "@/pages/home/index.vue"
	import workbench from "@/pages/work/index.vue"
	import myoperator from "@/pages/my/index.vue"
	export default {
		name: "indexPage",
		components: {
			homePage,
			workbench,
			myoperator
		},
		data() {
			return {
				banner: [{
				  image: 'https://resource.tuniaokj.com/images/swiper/tnbanner1.jpg'
				}, {
				  image: 'https://resource.tuniaokj.com/images/swiper/tnbanner2.jpg'
				}, {
				  image: 'https://resource.tuniaokj.com/images/swiper/tnbanner3.jpg'
				}, {
				  image: 'https://resource.tuniaokj.com/images/swiper/tnbanner4.jpg'
				}],
				// 底部tabbar菜单数据
				tabbarList: [
				  {
				    title: '首页',
				    activeIcon: 'count-fill',
				    inactiveIcon: 'menu'
				  },
				  {
				    title: '工作台',
				    activeIcon: 'honor-fill',
				    inactiveIcon: 'honor'
				  },
				  {
				    title: '我的',
				    activeIcon: 'discover-fill',
				    inactiveIcon: 'discover'
				  }
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0)
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
			  return index === tabbar_index
			})
			this.switchTabbar(index)
		},
		methods: {
			// 切换导航
			switchTabbar(index) {
			  this._switchTabbarPage(index)
			},
			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {
			},
			// 切换导航页面
			_switchTabbarPage(index) {
			  const selectPageFlag = this.tabberPageLoadFlag[index]
			  if (selectPageFlag === undefined) {
			    return
			  }
			  if (selectPageFlag === false) {
			    this.tabberPageLoadFlag[index] = true
			  }
			  this.currentIndex = index
			}
		}
	}
</script>

<style lang="scss" scoped>
  @import '@/static/css/custom_nav_bar.scss';
  
  .custom-tabbar-page {
    height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
  }
  .about-shadow {
    border-radius: 15rpx;
    box-shadow: 0rpx 0rpx 50rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  .about {
    &__wrap {
      position: relative;
      z-index: 1;
      margin: 20rpx 30rpx;
      margin-top: -230rpx;
    }
  }
  .tn-navbg {
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 100;
  } 
  .course-shadow{
    box-shadow: 0rpx 0rpx 80rpx 0rpx rgba(0, 0, 0, 0.07);
  }
  
  .course-radius{
    border-radius: 15rpx;
  }
  
  /* 图标容器15 start */
  .icon15 {
    &__item {
      width: 30%;
      background-color: #FFFFFF;
      border-radius: 10rpx;
      padding: 30rpx;
      margin: 20rpx 10rpx;
      transform: scale(1);
      transition: transform 0.3s linear;
      transform-origin: center center;
      
      &--icon {
        width: 100rpx;
        height: 100rpx;
        font-size: 60rpx;
        border-radius: 50%;
        margin-bottom: 18rpx;
        position: relative;
        z-index: 1;
        
        &::after {
          content: " ";
          position: absolute;
          z-index: -1;
          width: 100%;
          height: 100%;
          left: 0;
          bottom: 0;
          border-radius: inherit;
          opacity: 1;
          transform: scale(1, 1);
          background-size: 100% 100%;
        }
      }
    }
  }
</style>
